<template>
	<div>
		<!-- 上部分 -->
		<div>
			<!-- 轮播图 -->
			<div style="height: 175px">
				<img
					class="swiper"
					src="https://image.chwlsq.com/4187/config/2107081400024902888.jpg"
				/>
			</div>
			<!-- 日期 -->
			<div class="date">
				<a class="date-left">
					<img
						src="http://xj.dooop.top/themes/weather/images/qing.png"
						width="48"
						height="48"
					/>
					<ul class="date-left-right">
						<li>
							<span>石家庄</span>
							<span>-2-9度</span>
							<span>多云</span>
						</li>
						<li>
							<span>2022-02-11</span>
							<span>星期五</span>
						</li>
					</ul>
				</a>
				<a class="date-right">签到有礼</a>
			</div>
			<!-- 功能菜单 -->
			<function-menu></function-menu>
		</div>
		<div class="cente">
			<span>辛集微姐服务站</span>
		</div>
		<div class="line" style="height: 2px; background: #ed414a"></div>
		<!-- 下面列表部分 -->
		<div v-for="item in list" :key="item.userId" @click="openDetail(item)">
			<home-item :item="item"></home-item>
		</div>
		<!-- 最上面立即关注的浮窗 -->
		<div class="floating">
			<div class="left">
				<img
					src="http://img.chwlsq.com/4187/config/2107081225598807066.jpg"
					style="width: 32px; height: 32px; margin-top: 2px"
				/>
				<div style="margin-left: 10px">
					<p>辛集微姐服务站 公众号</p>
					<p style="font-size: 12px">关注【辛集微姐服务站】方便使用</p>
				</div>
			</div>
			<div class="right">
				<span class="follow">立即关注</span>
				<img
					src="../assets/images/close.png"
					style="width: 22px; height: 22px; margin-top: 2px"
				/>
			</div>
		</div>
		<!-- 最右侧的咨询客服 -->
		<img class="service" src="http://xj.dooop.top/midetails.html?id=2161" />
	</div>
</template>
<script>
import HomeItem from "@/views/HomeItem.vue";
import FunctionMenu from "../components/FunctionMenu.vue"
import api from "../api/index"

export default {
	components: { HomeItem, FunctionMenu },
	data () {
		return {
			list: []
		}
	},
	created () {
		this.findByExpire()
	},
	methods: {
		//获取列表数据
		findByExpire: async function () {
			const params = {};
			const res = await api.findByExpire(params);
			this.list = res.data;
			console.log("列表数据", res);
		},
		//跳转到详情页面
		openDetail (item) {
			console.log('点击进入详情页面')
			this.$router.push({
				name: "Detail",
				params: {
					item
				}
			});
		},


	},
};
</script>
<style scoped>
body {
	font-size: 14px;
	background-color: #f2f2f2;
}
/* 轮播图 */
.swiper {
	height: 175px;
	width: 100%;
}
/* 日期 */
.date {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	background-color: white;
	padding: 15px 10px 0 10px;
}
.date-left {
	display: flex;
	flex-direction: row;
	align-items: center;
}
.date-left-right {
	padding: 0;
	color: #999;
	font-size: 13px;
	margin-left: 10px;
}
.date-right {
	width: 68px;
	height: 24px;
	line-height: 24px;
	text-align: center;
	color: #fff;
	font-size: 13px;
	background-color: #46c01b;
	border-radius: 2px;
}
/* 功能菜单 */
.device {
	padding: 0 0 15px 0;
	width: calc(100% - 15px);
	background-color: white;
	height: auto;
	display: flex;
	flex-direction: row;
	flex-flow: wrap;
}
.device > a {
	width: 20%;
	text-align: center;
	margin-top: 15px;
}
.mbg > p {
	margin: 0;
	padding: 0;
}
.mbg .ico > img {
	height: 40px;
	width: 40px;
}
.ico-title {
	font-size: 12px;
	color: #222;
}
/* 辛集微姐服务站 */
.cente {
	background-color: white;
	height: 40px;
	line-height: 40px;
	text-align: center;
	color: #ed414a;
	font-size: 14px;
}
/* 最上面立即关注的浮窗 */
.floating {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 999;
	background-color: rgb(0, 0, 0, 0.7);
	width: calc(100% - 20px);
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	color: white;
	font-size: 14px;
	padding: 10px;
}
.floating .left {
	display: flex;
	flex-direction: row;
	align-content: center;
}
.floating .right {
	display: flex;
	flex-direction: row;
	align-content: center;
	margin-right: 10px;
}
.right .follow {
	color: #68b543;
	border: 1px solid #68b543;
	height: 24px;
	line-height: 24px;
	border-radius: 3px;
	padding: 0 8px;
	font-size: 14px;
	margin-right: 10px;
}
/* 最右侧的咨询客服 */
.service {
	position: fixed;
	width: 46px;
	height: 46px;
	z-index: 999;
	right: 20px;
	bottom: 50px;
}
</style>
